<template>
    <div>
        <div>【云端报警风险】</div>
        <div ref="target" class="w-full h-full"></div>
    </div>
</template>

<script setup>
import { ref, defineProps, onMounted,watch } from 'vue'
import * as echarts from 'echarts'

const props = defineProps({
    data:{
        type:Object,
        required:true
    }
})

console.log("雷达图",props.data)

// 初始化数据实例
let myChart = null
const target = ref(null)
onMounted(() => {
    // 实例化echarts对象
    myChart = echarts.init(target.value)
    renderChart()
})
// 构建options对象
const renderChart = () => {
    const options = {
        // 雷达图坐标系
        radar:{
            name:{
                textStyle:{
                    color:'#05D5FF',
                    fontSize: 14,
                }
            },
            shape: 'ploygon',
            center:["50%","50%"],
            radius: "80%",
            startAngle: 120,
            axisLine:{
                lineStyle:{
                    color:'rgba(5,213,255,0.8)'
                }
            },
            splitLine:{
                show:true,
                lineStyle:{
                    width: 1,
                    color:'rgba(5,213,255,0.8)'
                }
            },
            indicator:props.data.risks.map(item => ({
                name:item.name,
                max: 100,
            })),
            splitArea:{
                show: false,
            }
        },
        // 坐标极点
        polar:{
            center: ['50%', '50%'],
            radius:'0%'
        },
        // 坐标角度
        angleAxis:{
            min: 0,
            interval: 5,
            clockwise:false,//刻度逆时针
        },
        // 径向轴
        radiusAxis:{
            min: 0,
            interval: 20,
            splitLine: {
                show:true
            }
        },
        // 核心配置
        series:{
      type: 'radar',
      symbol: 'circle',
      symbolSize: 10,
      itemStyle: {
        normal: {
          color:'#05D5FF'
        }
      },
      areaStyle: {
        normal: {
          color: '#05D5FF',
          opacity:0.5
        }
      },
      lineStyle: {
        with: 2,
        color:'#05D5FF'
      },
      label: {
        normal: {
          show:true,
          color: '#05D5FF',
        }
      },
      data: [
        {
          value:props.data.risks.map(item=>item.value)
        }
      ]
    }
}

    myChart.setOption(options)
}
// 设置 setOptions

// 数据变化时重新触发renderChart函数
watch(() => props.data, () => {
    renderChart()
})
</script>

<style lang="scss" scoped></style>